<template>
  <div class="bottomPlayArea">
    <!-- 歌曲图标 -->
    <div class="song_cover">
      <img src="../assets/avator.jpg" />
    </div>
    <!-- 播放进度条-背景条 -->
    <div id="progressBgId" class="progressBg"></div>
    <!-- 当前-播放进度条 -->
    <div class="progress" :style="{ width: pointerVal + 'px' }"></div>
    <!-- 进度条,圆按钮 -->
    <div class="progressPointer" :style="{ left: pointerVal + 'px' }"></div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
export default {
  name: "bottomPlayArea",
  data() {},
  setup() {
    //进度条,拖动的圆点
    let pointerVal = ref(33);
    // vue3生命周期钩子,onMounted:当挂载时...
    onMounted(() => {
      let p_BgId = document.getElementById("progressBgId");
      // 获得盒子的尺寸.
      let p_BgIdObj = p_BgId.getBoundingClientRect();
      let isDrag = false;
      //小圆点移动的距离 = e.client - p_BgIdObj.left.
      p_BgId.addEventListener("mousedown", function (e) {
        pointerVal.value = e.clientX - p_BgIdObj.left;
      });
      
      // 拖动进度条的判断
      document.body.addEventListener("mousemove", function (e) {
        let mouseMoveVal = e.clientX - p_BgIdObj.left;
        // 边界检测
        if (mouseMoveVal > p_BgIdObj.width - 10) {
          mouseMoveVal = p_BgIdObj.width - 10;
        } else if (mouseMoveVal < 0) {
          mouseMoveVal = 0;
        }
        // 鼠标按下mousedown时进行拖动.松开时就停止拖动.
        if (isDrag) {
          pointerVal.value = mouseMoveVal;
        }
      });

      p_BgId.addEventListener("mousedown", function () {
        isDrag = true;
      });
      document.body.addEventListener("mouseup", function () {
        isDrag = false;
      });
    });

    return {
      pointerVal,
    };
  },
};
</script>

<style scoped>
.bottomPlayArea {
  width: 100%;
  height: 60px;
  background-color: #d39696;
  position: relative;
}
.song_cover {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 13px;
  left: 40px;
  border-radius: 8px;
  overflow: hidden;
}
/* 进度条背景 */
div.progressBg {
  width: 100%;
  height: 12px;
  background: #000;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
/* 当前-播放进度条 */
div.progress {
  height: 5px;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
/* 进度条的圆按钮 */
div.progressPointer {
  width: 10px;
  height: 10px;
  background: #2dff00;
  border-radius: 100%;
  z-index: 8;
  overflow: hidden;
  position: absolute;
  top: -4px;
}
</style>
